import { FormFieldWrapper } from '@components/common/formFieldWrapper/formFieldWrapper'
import { ReactComponentExt } from '@helpers/ReactExt'
import { BaseProps } from '@store/store'
import { Button, Card, Col, Empty, Form, Row, Table } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import * as React from 'react'
import { Link } from 'react-router-dom'
import { searchFieldConfig, tableColumns } from './constantConfigs'
import * as styles from './studentList.less'

// tslint:disable-next-line:no-empty-interface
export interface StudentListProps extends BaseProps, FormComponentProps {

}

interface Data {
  guardianPhone: number
  guardianWechat: string
  schoolTypeText: '学期班' | '全年班'
  sexText: '男' | '女'
}

type TableDatasourceType = DataModels.StudentModel & Data

interface StudentListState {
  list: TableDatasourceType[]
}

class StudentList extends ReactComponentExt<StudentListProps, StudentListState> {
  public init(): void {
    this.state = {
      list: []
    }
    this.handleReset = this.handleReset.bind(this)
    this.handleSearch = this.handleSearch.bind(this)
    this.createStudentRecord = this.createStudentRecord.bind(this)
    this.jumpToStudentDetailPage = this.jumpToStudentDetailPage.bind(this)
  }

  public async componentDidMount() {
    const { data: { list } } = await this.api.getStudentList(0, 10)
    await this.setState({ list: this.normalizeStudentList(list) })
  }

  public render() {
    const { form } = this.props
    return (
      <div className={styles.studentListPage}>
        <Card title='搜索' extra={this.genCardExtra()}>
          <Form onSubmit={this.handleSearch}>
            <Row gutter={24}>
              <FormFieldWrapper span={8} form={form} formFieldConfig={searchFieldConfig} />
            </Row>
            <Row>
              <Col span={24} style={{ textAlign: 'right' }}>
                <Button type='primary' htmlType='submit'>搜索</Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>重置</Button>
                {/* <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                  Collapse <Icon type={this.state.expand ? "up" : "down"} />
                </a> */}
              </Col>
            </Row>
          </Form>
        </Card>
        <div className={styles.listWrap}>
          {this.renderTable()}
        </div>
      </div>
    )
  }

  private normalizeStudentList(list: DataModels.StudentModel[]): StudentListState['list'] {
    return list.map((item) => {
      let guardianPhone
      let guardianWechat
      const { motherPhoneNumber, motherWxchatNumber, fatherPhoneNumber, fatherWechat, schoolType, sex } = item
      if (motherPhoneNumber) {
        guardianPhone = motherPhoneNumber
      } else {
        guardianPhone = fatherPhoneNumber
      }
      if (motherWxchatNumber) {
        guardianWechat = motherWxchatNumber
      } else {
        guardianWechat = fatherWechat
      }
      return {
        ...item,
        guardianPhone,
        guardianWechat,
        schoolTypeText: schoolType === 0 ? '学期班' : '全年班',
        sexText: sex === 0 ? '男' : '女'
      }
    })
  }

  private renderAction(id: number) {
    return (
      <div className='box'>
        <span className={styles.deleteLink}>删除</span>
        <Link to={`/student/create?action=look&student_id=${id}`} className={styles.link}>查看</Link>
        <Link to={`/student/create?action=edit&student_id=${id}`} className={styles.link}>编辑</Link>
        <Link to={`/student/detail?student_id=${id}`} className='blue-link'>上传作品</Link>
      </div>
    )
  }

  private normalizeTableColumns(): TableColumnsInter[] {
    return [
      ...tableColumns,
      {
        dataIndex: '',
        key: 'action',
        title: '操作',
        render: (_text: string, item: TableDatasourceType) => {
          const { id } = item
          return this.renderAction(id)
        }
      }
    ]
  }

  private renderTable() {
    const { list } = this.state
    if (list.length === 0) {
      return <Empty description='暂无数据' />
    }
    return (
      <Table<TableDatasourceType>
        rowKey={(_row, index) => index.toString()}
        dataSource={list}
        columns={this.normalizeTableColumns()}
      />
    )
  }

  private createStudentRecord(e: React.MouseEvent) {
    this.props.history!.push('/student/create')
  }

  private genCardExtra() {
    return (
      <Button
        icon='plus'
        type='primary'
        onClick={this.createStudentRecord}
      >
        创建学生档案
      </Button>
    )
  }

  private jumpToStudentDetailPage() {
    this.props.history!.push('/student/detail?student_id')
  }

  private handleSearch() {
    // todo

  }

  private handleReset() {
    // todo
  }

}

export default Form.create<StudentListProps>({ name: 'student_list_form' })(StudentList)
